<template>
    <div>
        <h2>医师注册管理</h2>
        <div>
            <el-table :data="tableData" height="450" style="width: 100%">
                <el-table-column prop="_id" label="序号" width="350" />
                <el-table-column prop="username" label="账号" width="150" />
                <el-table-column prop="fullname" label="姓名" width="150" />
                <el-table-column prop="age" label="年龄" width="150" />
                <el-table-column label="操作" width="200">
                    <template #default="scope">
                        <div @click="onEdit(scope.row)" type="primary">
                            <el-button text @click="dialogFormVisible1 = true">
                                修改
                            </el-button>
                        </div>
                        <el-button size="small" type="danger" @click="deletPhyAdminInfo(scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
    <!-- 修改信息 -->
    <div>
        <el-dialog v-model="dialogFormVisible1" title="修改信息">
            <el-form :model="formChange" v-model="_id">
                <el-form-item label="年龄" :label-width="formLabelWidth">
                    <el-input v-model="formChange.age" autocomplete="off" />
                </el-form-item>
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="formChange.fullname" autocomplete="off" />
                </el-form-item>
                <el-form-item label="账号" :label-width="formLabelWidth">
                    <el-input v-model="formChange.username" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible1 = false">取消</el-button>
                    <div @click="onBack()" type="primary">
                        <div @click="onBack()" type="primary">
                            <el-button type="primary" @click="dialogFormVisible({ ...formChange })">
                                确定
                            </el-button>
                        </div>
                    </div>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { PhyAdmin, ChangePhyAdmin, DeletPhyAdmin } from '@/api';
import { forEach } from 'lodash';
import { reactive, ref } from 'vue'
// 动态获取数据
const tableData = ref([])
const getPhyAdminInfo = async () => {
    let res = await PhyAdmin()
    let { Code, data } = res.data
    if (Code == 1) {
        tableData.value = data
    }
    return tableData
}
getPhyAdminInfo()
// 修改信息
const dialogFormVisible1 = ref(false)
let _id = ref(1)
const dialogFormVisible = async (user: any) => {
    let { _id, fullname, age, username } = user
    let res = await ChangePhyAdmin(_id, username, fullname, age)
    let { Code } = res.data
    if (Code == 1) {
        getPhyAdminInfo()
    }
    return false
}
const formLabelWidth = '140px'
let formChange = reactive({
    _id,
    username: "",
    fullname: '',
    age: 0
})
const onEdit = (row: { username: string; fullname: string; age: number; _id: number }) => {
    let { _id } = row
    formChange._id = _id
}
const onBack = () => {
    dialogFormVisible1.value = false
}
// 删除
const deletPhyAdminInfo = async (row: { _id: number }) => {
    let { _id } = row
    let res = await DeletPhyAdmin(_id)
    let {Code} = res.data
    if (Code == 1) {
        getPhyAdminInfo()
    }
}
</script>